<template>
	<view class="bindBank pb-30 pl-30 pr-30">
		<view class="bindBank-ul  pt-30">
			<u-swipe-action bg-color="transparent" :show="item.show" :index="index" v-for="(item, index) in list"
				:key="item.id" @click="click" @open="open" :options="options">
				<!-- <view class="item u-border-bottom">
							<image mode="aspectFill" :src="item.images" />
							此层wrap在此为必写的，否则可能会出现标题定位错误
							<view class="title-wrap">
								<text class="title u-line-2">{{ item.title }}</text>
							</view>
						</view> -->
				<view @click="selectBank(item)" class="bindBank-li flex1 radius-20 pt-40 pb-45 pl-30">
					<image src="/static/zhaoshang.png" mode="" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;">
					</image>
					<view class="flex-1">
						<view class="">
							<view class="white size-32 f-bold">{{ item.bank_name }}</view>
							<view class="white size-26 mt-20">储存卡</view>
						</view>
						<view class="mt-50 size-30 f-bold white">
							{{ item.number.substring(0,4)+" **** **** " + item.number.substring(item.number.length - 4)}}
						</view>
					</view>
				</view>
			</u-swipe-action>

		</view>
		<view class="radius-20 bg-1 pt-40 pb-30 flex1 flex-column flex-center flex-middle" @click="bindBank">
			<image src="/static/addbank.png" mode="" style="width: 76rpx;height: 76rpx;"></image>
			<view class="mt-20 mb-20 f-bold size-30">添加银行卡</view>
			<view class="color-c2 size-26">添加银行卡，提现更方便</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,//
				list: [], //
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		methods: {
			click(index, index1) {
				this.$http('api/newapi/bankDel',{
					id:this.list[index].id
				}).then(res=>{
					this.$u.toast(`删除成功`);
					this.list.splice(index, 1);
				})
			},
			
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			selectBank(item) {
				if (this.type == 1) {
					uni.setStorageSync('bank', JSON.stringify(item))
					uni.navigateBack()
				}
				
			},
			bindBank() {
				uni.navigateTo({
					url: '/pages/my/bank'
				})
			},
			getBankList() {
				this.$http('api/newapi/bankList').then(res => {
					res.forEach(item => {
						item.show = false
					})
					this.list = res
				}).catch(err=>{
					uni.clearStorageSync()
					uni.navigateTo({
						url:'/pages/login/index'
					})
				})
			}
		},
		onShow () {
			this.getBankList()
		},
		onLoad({type}) {
			this.type = type
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.bg-1 {
		background-color: #fff;
		
		image {
			filter: brightness(0.1);
		}
		view {
			color: #3c3c3c;
		}
	}
	.bindBank-li {
		background: linear-gradient(45deg, #A776F7 0%, #6990F7 100%);
	}

	/deep/ .u-swipe-action {
		margin-bottom: 30rpx;
	}
</style>
